<template>
	<view class="content" :class="show ? 'fade-in' : 'fade-out'">
		<view class="bg">
			<view class="title">#{{tagsUser.title}}#</view>
			<view class="num">{{total}}个帖子</view>
		</view>
		<view class="box">
			<block v-for="(item,index) in gList" :key="index">
				<topic-list :item="item"></topic-list>
			</block>
		</view>
		<tn-load-more :status="loadingStatus"></tn-load-more>
		<view class="" style="height: 40rpx;"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id:0,
				tagsUser:'',
				gList:[],
				show:false,
				total:0,
				loadingStatus: 'loadmore',
				page: 1,
			}
		},
		onLoad(option) {
			this.id = option.id
			uni.showLoading();
			const promiseArr = [this.getGettags(), this.getGoodslist()]
			Promise.all(promiseArr).then(resArr => {
				this.renderPage(resArr)
			}).catch(err => {
				console.log(err)
			})
		},
		onReachBottom() {
			this.loadingStatus = 'loading'
			this.page+=1
			this.bottomLoadingApi()
		},
		methods:{
			// 话题详情
			getGettags() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/Category/Gettags',
					data: {
						id:this.id
					}
				})
			},
			// 动态列表
			getGoodslist() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/getGoodslist',
					data: {
						tags_id:this.id,
						page: 1
					}
				})
			},
			async bottomLoadingApi() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/index/getGoodslist',
						data: {
							tags_id:this.id,
							page: this.page
						}
					})
					console.log(result)
					let data = result.data.data.data
					this.gList = this.gList.concat(data)
					if (data.length == 0) {
						this.page--
						this.loadingStatus = 'nomore'
					}
				} catch (e) {
					console.log(e)
				}

			},
			renderPage([res1, res2]){
				// getGettags 话题详情
				this.tagsUser = res1.data.data
				// getGoodslist //动态列表
				let {data,total} = res2.data.data
				this.gList = data
				if(this.gList.length  == 0){
					this.loadingStatus = 'nomore'
				}
				this.total = total
				uni.hideLoading();
				this.show = true

			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		.bg {
			height: 185px;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30rpx;
			.title {
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			.num{
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 24rpx;
			}
		}
		.box{
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -150rpx;
			//background-color: #111224;
			padding: 40rpx 30rpx;
			min-height: 500rpx;
		}
	}
</style>
